<template>
  <view class="map-item">
    <image class="map-img" src="https://app5.shuguostar.cn/imgs/images/demo/map.png" />

    <view v-for="(item, index) in question?.questionList" :key="index" class="input-box" :class="[`input-box-${index}`]">
      <up-input
        v-if="item.type === 1"
        v-model="answerTextList[item.inputIndex || 0]"
        placeholder=""
      />

      <view v-else class="choose-item" @click="handleShowPopup(item)">
        {{ showAnswer && answerList.length ? answerList.map(item => item.text).join('') : '' }}
      </view>
    </view>

    <up-popup :show="showPopup" mode="center" :round="10" @close="handleClose" @open="handleShowPopup()">
      <view class="fill-content flex flex-col items-center">
        <view class="text-box flex">
          <text v-if="!answerList.length" class="text">
            请选择下面汉字组成答案吧
          </text>
          <text v-for="item in answerList" v-else :key="`${item.text}top`" class="text-item" @click="handleClick(1, item.text, item.index)">
            {{ item.text }}
          </text>
        </view>

        <view class="text-group flex flex-wrap justify-center">
          <text v-for="(item, index) in questionItem?.content!.split(',')" :key="item" :class="[!item ? 'no-text' : 'text']" @click="handleClick(2, item, index)">
            {{ item }}
          </text>
        </view>

        <image class="close-icon" src="https://app5.shuguostar.cn/imgs/images/demo/confirm.png" @click="handleConfirm" />
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts" name="MapItem">
import type { MapItem, MapQuestion } from '@/pages/views/demo/type';

const props = defineProps({
  question: {
    type: Object as () => MapQuestion,
    default: () => {},
  },
});

const answerTextList = ref<Array<string>>([]);
const answerList = ref<Array<{ index: number; text: string }>>([]);
const questionItem = ref<MapItem>();
const showAnswer = ref<boolean>(false);
const handleClick = (type: number, text: string, index: number) => {
  if (!text)
    return;

  if (type === 1) {
    answerList.value = answerList.value.filter((item: { index: number; text: string }) => item.text !== text);
    const list = questionItem.value!.content!.split(',');
    list[index] = text;
    questionItem.value!.content! = list.join(',');
  }
  else {
    answerList.value.push({
      index,
      text,
    });
    const list = questionItem.value!.content!.split(',');
    list[index] = '';
    questionItem.value!.content! = list.join(',');
  }
};

// 弹出框
const showPopup = ref<boolean>(false);
const handleShowPopup = (item?: MapItem) => {
  showPopup.value = true;
  if (item) {
    questionItem.value = item;
  }
};

const handleClose = () => {
  showPopup.value = false;
};

const handleConfirm = () => {
  showPopup.value = false;
  showAnswer.value = true;
};

const isPlay = ref<boolean>(false);
const mindMap = 'https://app5.shuguostar.cn/imgs/bookVido/audio/mindMap.mp3';
let innerAudioContext: any;
const playAudio = () => {
  innerAudioContext = uni.createInnerAudioContext();
  innerAudioContext.autoplay = true;
  innerAudioContext.src = mindMap;
  innerAudioContext.onPlay(() => {
    isPlay.value = true;
  });
  innerAudioContext.onEnded(() => {
    isPlay.value = false;
  });
};

const pauseAudio = () => {
  innerAudioContext?.destroy();
  innerAudioContext = null;
};

watch(() => props.question?.id, () => {
  answerTextList.value = [];
  // answerList.value = [];
  playAudio();
}, { deep: true });

defineExpose({
  answerList,
  answerTextList,
  pauseAudio,
});
</script>

<style lang="scss" scoped>
@function tovmin($rpx){//$rpx为需要转换的字号
  @return #{calc($rpx * 100 / 750)}vmin;
}

.map-item {
  position: relative;
  width: tovmin(1060);
  height: tovmin(605);
  margin: tovmin(40);
  padding: tovmin(10);
  border-radius: tovmin(12);
  background: #fff;

  .map-img {
    width: tovmin(1040);
    height: tovmin(585);
    border-radius: tovmin(12);
  }

  .input-box {
    position: absolute;
    width: tovmin(100);
    height: tovmin(40);
    border-radius: tovmin(8);

    .choose-item {
      width: tovmin(100);
      height: tovmin(40);
      font-size: tovmin(24);
      line-height: tovmin(32);
      padding: tovmin(4) tovmin(8);
    }
  }

  .input-box-0 {
    top: tovmin(44);
    left: tovmin(152);
  }

  .input-box-1 {
    top: tovmin(360);
    left: tovmin(82);
  }

  .input-box-2 {
    top: tovmin(154);
    left: tovmin(294);
  }

  .input-box-3 {
    top: tovmin(292);
    left: tovmin(260);
  }

  .input-box-4 {
    top: tovmin(408);
    left: tovmin(356);
  }

  .input-box-5 {
    top: tovmin(106);
    left: tovmin(568);
  }

  .input-box-6 {
    top: tovmin(240);
    left: tovmin(592);
  }

  .input-box-7 {
    top: tovmin(408);
    left: tovmin(542);
  }

  .input-box-8 {
    top: tovmin(408);
    left: tovmin(708);
  }

  .input-box-9 {
    top: tovmin(252);
    left: tovmin(882);
  }

  .input-box-10 {
    top: tovmin(432);
    left: tovmin(882);
  }

  .fill-content {
    position: relative;
    padding: tovmin(80) tovmin(80) tovmin(160) tovmin(80);

    .text-box {
      width: 100%;
      height: tovmin(74);
      padding: tovmin(6) tovmin(10);
      border-bottom: tovmin(2) solid #797979;

      .text {
        flex: 1;
        font-size: tovmin(24);
        text-align: center;
        line-height: tovmin(64);
        color: #C1BFBF;
      }

      .text-item {
        display: inline-block;
        width: tovmin(60);
        height: tovmin(60);
        font-size: tovmin(28);
        line-height: tovmin(56);
        text-align: center;
        color: #555;
        border: tovmin(2) solid #555;
        border-radius: tovmin(8);
        margin: 0 tovmin(8);
      }
    }

    .text-group {
      padding-top: tovmin(80);

      .text {
        width: tovmin(60);
        height: tovmin(60);
        font-size: tovmin(28);
        line-height: tovmin(56);
        text-align: center;
        color: #555;
        border: tovmin(2) solid #555;
        border-radius: tovmin(8);
        margin: 0 tovmin(8);
      }

      .no-text {
        width: tovmin(60);
        height: tovmin(60);
        margin: 0 tovmin(8);
        border-radius: tovmin(8);
        background: #ddd;
      }
    }

    .close-icon {
      position: absolute;
      bottom: tovmin(40);
      right: tovmin(40);
      width: tovmin(64);
      height: tovmin(64);
    }
  }
}
</style>
